<template>
  <div>
    <view class="sound_one">
      <view class="sound_one_top">
        <view class="headerPic">
          <image :src="dynamic.logo" class="icon_img"></image>
        </view>
        <view class="message">
          <view class="top">
            <view class="nickname">{{dynamic.name}}</view>
            <!--<view class="time">03-08 17:33</view>-->
            <view class="time">{{formatDate}}</view>
          </view>
          <voice :src="dynamic.voice"/>
        </view>
      </view>
      <view class="sound_one_bottom">
        <view class="test">
          <view class="comment">
            <view class="img_view">
              <image src="/static/images/Slice Copy@2x.png" class="icon_comment"></image>
            </view>
            <view class="img_view">{{comments}}</view>
          </view>
          <view class="listen">
            <view class="img_view">
              <image src="/static/images/Slice@2x.png" class="icon_listen"></image>
            </view>

            <view class="img_view">{{listen}}</view>
          </view>
        </view>
      </view>
    </view>
  </div>
</template>

<script>
import {formatSimpleTime} from "../utils";
import voice from '@/components/voice'
import gender from '@/components/gender'
import Gender from "./gender";
import Voice from "./voice";

export default {
  components: {
    Voice,
    Gender},
  props: ['dynamic'],
  component: {
    voice
  },
  computed: {
    formatDate: function() {
      return formatSimpleTime(this.dynamic.time);
    },
    comments: function () {
      if(this.dynamic.commentAmount != null && this.dynamic.commentAmount > 0) {
        return this.dynamic.commentAmount;
      }
      return '评价'
    },
    listen:function () {
      if(this.dynamic.soundAmount != null && this.dynamic.soundAmount > 0) {
        return this.dynamic.soundAmount;
      }
      return '听'
    }
  }
}
</script>

<style>
/*.card {*/
  /*padding: 10px;*/
/*}*/


.sound_one {
  width: 100%;
  height: 232rpx;
  background: #fff;
  margin-bottom: 20rpx;
  padding-left: 30rpx;
  box-sizing: border-box;
}

.sound_one_top {
  width: 100%;
  height: 142rpx;
  border-bottom: 1rpx solid #eee;
}


/*头像  */

.headerPic {
  width: 94rpx;
  height: 142rpx;
  float: left;
  padding-top: 40rpx;
  padding-bottom: 30rpx;
  box-sizing: border-box;
}

.message {
  width: 626rpx;
  /* height: 232rpx; */
  float: left;
}

.message .top {
  width: 100%;
  height: 68rpx;
}

/*名字  */

.nickname {
  padding: 20rpx 40rpx 8rpx 0;
  box-sizing: border-box;
  font-size: 28rpx;
  float: left;
  color: #666;
}

/*时间  */

.time {
  padding: 24rpx 0 10rpx 0;
  box-sizing: border-box;
  font-size: 24rpx;
  color: #999;
  float: left;
}

.message .bottom {
  width: 100%;
  height: 80rpx;
}

.voice {
  background: #fff;
  border: 1rpx solid #999;
  border-radius: 4rpx;
  height: 60rpx;
  float: left;
  padding: 10rpx;
  box-sizing: border-box;
  margin-right: 20rpx;
  clear: both;
}

/*声音图片样式  */

.icon_sound, .icon_voice {
  width: 40rpx;
  height: 40rpx;
}

.icon_sound {
  margin-right: 8rpx;
}

/*时长样式  */

.voice_count {
  height: 78rpx;
  font-size: 24rpx;
  color: #999;
  line-height: 60rpx;
  float: left;

}

.sound_one_bottom {
  /* padding-left: 320rpx; */
  height: 74rpx;
  /* box-sizing: border-box; */
  width: 100%;
}

.test {
  float: right;
  height: 74rpx;
  margin-right: 40rpx;
}

/*评论收听的共同样式  */

.comment, .listen {
  float: left;
  height: 74rpx;
  padding: 22rpx 0 20rpx 0;
  box-sizing: border-box;
}

.comment {
  margin-right: 58rpx;
}

.img_view {
  margin-bottom: 22rpx;
  float: left;
  font-size: 24rpx;
  color: #666;
}

/*评价和收听的图标  */

.icon_comment, .icon_listen {
  width: 40rpx;
  height: 40rpx;
  margin-right: 22rpx;
}

.icon_img {
  width: 72rpx;
  height: 72rpx;
  border-radius: 36rpx;
  border: 1rpx solid #eee;
}


</style>
